<!-- 左侧列表式模板 -->
<template>
  <view class="template-body" :style="[{ height: contentHeight }]">
    <view class="left-side">
      <leftAsideList
        :propsData="propsData"
        :dataList="dataList"
        ref="leftAsideList"
        @leftNavChange="leftNavChange"
      ></leftAsideList>
    </view>
    <view
      :class="[
        'template-content',
        addBorderTopLeft() ? 'addBorderTopLeft' : '',
      ]"
      :style="[{ height: scrollBoxHeight }]"
    >
      <scroll-view
        scroll-y
        :scroll-top="scrollViewTop"
        :lower-threshold="150"
        refresher-enabled
        :refresher-triggered="freshing"
        refresher-default-style="none"
        @refresherpulling="refresherpulling"
        @refresherrefresh="refresherrefresh"
        @scrolltolower="scrollToBottom"
        @refresherrestore="showRefresh = false"
      >
        <view class="refresh-box" v-if="showRefresh">
          <i class="iconfont icon-leftbutton-copy"></i>
          <text>向下继续{{ beforeText }}</text>
        </view>
        <classifyAd :propsData="propsData"></classifyAd>
        <view class="goodsContent" id="classifyGoodsBox">
          <goodsList
            :propsData="propsData"
            :goodsList="goodsList"
            v-if="styleType == 7"
          ></goodsList>

          <view class="navList" v-if="styleType == 1">
            <menuGoodsList
              :propsData="propsData"
              :dataSource="navList"
            ></menuGoodsList>
          </view>
        </view>

        <!-- <nextCat :show="showNextCat" @nextCat="scrollChangeNav"></nextCat> -->
        <view class="no-more" v-if="parseInt(totalCount) === goodsList.length"
          >没有更多了~</view
        >
      </scroll-view>
    </view>
    <bottomToNext
      v-if="showBottomNext && canChangeNav"
      :nextText="nextText"
      @changeNext="scrollChangeNav"
    ></bottomToNext>
  </view>
</template>

<script>
import leftAsideList from "../components/leftAsideList/index.vue";
import classifyAd from "../components/classifyAd/index.vue";
import goodsList from "../components/goodsList/index.vue";
import menuGoodsList from "../components/menuGoodsList/index.vue";
import nextCat from "../components/nextCat/index.vue";
import bottomToNext from "../components/bottomToNext/index.vue";
import { diySysPageMixin } from "../../../mixins/index";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    contentHeight: {
      type: String,
      default: "",
    },
    catList: {
      type: Array,
      default: [],
    },
  },
  mixins: [diySysPageMixin],
  components: {
    leftAsideList,
    classifyAd,
    goodsList,
    menuGoodsList,
    nextCat,
    bottomToNext,
  },
  data() {
    return {
      dataList: [],
      goodsList: [],
      menuList: [],
      navList: [],
      page: 1,
      totalCount: 0,
      currentId: 0,
      boxHeight: 0,
      goodStart: 0,
      goodEnd: 0,
      scrollViewTop: 0,
      canChangeNav: false,
      scrollTimer: null,
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "没有更多了~",
      },
      showBottomNext: false,
      nextText: "",
      freshing: false,
      beforeText: "",
      showRefresh: false,
    };
  },
  mounted() {
    this.initData();
  },
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    levelNum() {
      return this.propsData.params.levelNum || "2";
    },
    scrollBoxHeight() {
      let scrollH = "";
      let outH = parseInt(this.contentHeight) - 6;
      scrollH = `${outH}px`;
      return scrollH;
    },
    showModule() {
      return this.propsData.params.showModule;
    },
    showNextCat() {
      let flag = false;
      this.$nextTick(() => {
        if (this.$refs.leftAsideList.activeTab < this.dataList.length - 1) {
          if (this.styleType == 1 && this.navList.length) {
            flag = true;
          }
          if (this.styleType == 7 && this.goodsList.length) {
            flag = true;
          }
        }
      });
      return flag;
    },
  },

  methods: {
    addBorderTopLeft() {
      this.$nextTick(() => {
        return this.$refs.leftAsideList.activeTab != 0;
      });
    },
    // 左侧菜单切换回调
    leftNavChange(e) {
      this.page = 1;
      this.showBottomNext = false;
      this.getCurrentBoxHeight();
      if (this.styleType == 1) {
        this.menuList = e.list;
      } else {
        this.menuList = e;
      }
      if (this.menuList && this.styleType == 7) {
        this.getGoodsList(this.menuList.id);
      } else {
        this.goodsList = [];
      }
      if (this.styleType == 1) {
        this.getClassifyGoods();
      }
    },
    // 初始化数据
    initData() {
      this.dataList = this.catList;
      try {
        if (this.styleType == 1 && this.dataList && this.dataList.length) {
          this.menuList = this.dataList[0].list;
          this.getClassifyGoods();
        }
        if (this.styleType == 7 && this.menuList && this.menuList.length) {
          this.menuList = this.catList;
          this.getGoodsList(this.menuList[0].id);
        }
      } catch (err) {
        new Error(err);
      }
    },
    async getClassifyGoods(cb) {
      uni.showLoading({
        title: "加载中...",
      });

      if (!this.menuList.length) {
        uni.hideLoading();
      }

      for (let i = 0; i < this.menuList.length; i++) {
        let goods = await this.getList(this.menuList[i].id);
        this.menuList[i]["goods_list"] = goods;
        if (i >= this.menuList.length - 1) uni.hideLoading();
      }

      this.navList = this.menuList;
      this.requestEnd();
      cb && cb();
    },
    async getList(id) {
      const res = await this.$allrequest.classification.goodsList({
        cat_id: id,
      });
      if (!res.code) {
        return res.data.list;
      } else {
        return [];
      }
    },
    // 触摸事件开始监听
    goodTouchstart(e) {
      let start = e.changedTouches[0].pageY;
      this.goodStart = start;
    },
    // 触摸事件结束监听
    goodTouchend(e) {
      let end = e.changedTouches[0].pageY;
      this.goodEnd = end;
      if (this.goodStart - this.goodEnd >= 35) {
        let boxHeight = this.boxHeight;
        if (this.showModule) {
          boxHeight = boxHeight + this.systemInfo.screenWidth * 0.04 * 2;
          +77;
        }
        if (this.styleType == 1) {
          if (boxHeight <= parseInt(this.scrollBoxHeight)) {
            setTimeout(() => {
              this.scrollChangeNav();
            }, 200);
          } else {
            if (this.canChangeNav) {
              if (this.scrollwithTimer) {
                clearTimeout(this.scrollwithTimer);
              }
              this.scrollwithTimer = setTimeout(() => {
                this.scrollChangeNav();
              }, 200);
            }
          }
        }
        if (this.styleType == 7) {
          if (this.scrollTimer) {
            clearTimeout(this.scrollTimer);
            this.scrollTimer = null;
            return;
          }
          // 滚动到底部加载数据
          if (
            this.page * 10 >= this.totalCount &&
            this.boxHeight <= parseInt(this.scrollBoxHeight)
          ) {
            this.scrollTimer = setTimeout(() => {
              this.scrollChangeNav();
            }, 200);
          }
          if (
            this.page * 10 >= this.totalCount &&
            this.boxHeight > parseInt(this.scrollBoxHeight) &&
            this.canChangeNav
          ) {
            this.scrollTimer = setTimeout(() => {
              this.scrollChangeNav();
              this.scrollTimer = null;
            }, 200);
          }
        }
      }
    },
    // 数据请求完成回调
    requestEnd() {
      setTimeout(() => {
        this.getCurrentBoxHeight();
      }, 0);
    },
    // 获取当前盒子高度，进行对比是否需要滑动切换
    getCurrentBoxHeight() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#classifyGoodsBox")
        .boundingClientRect((data) => {
          this.boxHeight = data.height;
          let boxHeight = this.boxHeight;
          if (this.showModule) {
            boxHeight = boxHeight + this.systemInfo.screenWidth * 0.04 * 2;
            +77;
          }

          if (
            boxHeight <= parseInt(this.scrollBoxHeight) &&
            this.styleType == 1
          ) {
            setTimeout(() => {
              this.canChangeNav = true;
            }, 200);
          }
        })
        .exec();
    },
    // 获取商品列表数据
    getGoodsList(id, isLoad = false) {
      this.currentId = id;
      this.$allrequest.classification
        .goodsList(
          {
            cat_id: id,
            page: this.page,
            limit: 10,
          },
          true
        )
        .then((res) => {
          if (!res.code) {
            if (isLoad) {
              this.goodsList = [...this.goodsList, ...res.data.list];
            } else {
              this.goodsList = res.data.list;
            }
            this.totalCount = res.data.row_count;
            this.requestEnd();
          }
        });
    },
    // 滑动切换分类
    scrollChangeNav() {
      this.page = 1;
      this.$nextTick(() => {
        if (this.$refs.leftAsideList.activeTab < this.dataList.length - 1) {
          this.$refs.leftAsideList.activeTab++;
          this.$nextTick(() => {
            this.menuList =
              this.dataList[this.$refs.leftAsideList.activeTab].list;
            if (this.styleType == 7) {
              this.getGoodsList(
                this.catList[this.$refs.leftAsideList.activeTab].id
              );
            } else {
              this.goodsList = [];
            }
            if (this.styleType == 1) {
              this.canChangeNav = false;
              this.getClassifyGoods();
            }
            this.scrollViewTop = 1;
            this.canChangeNav = false;
            this.showBottomNext = false;
            setTimeout(() => {
              this.scrollViewTop = 0;
            }, 100);
          });
        }
      });
    },
    // 滚动至页面底部回调
    scrollToBottom() {
      if (this.styleType == 1 && this.menuList.length) {
        // 滚动到底部切换分类
        // this.scrollChangeNav();
        this.canChangeNav = true;
        this.$nextTick(() => {
          if (this.$refs.leftAsideList.activeTab < this.dataList.length - 1) {
            if (this.styleType == 1 && this.navList.length) {
              this.nextText =
                this.dataList[this.$refs.leftAsideList.activeTab + 1].name;
              this.showBottomNext = true;
            }
          }
        });
      }
      if (this.styleType == 7) {
        // 滚动到底部加载数据
        if (this.page * 10 >= this.totalCount) {
          this.canChangeNav = true;
          this.$nextTick(() => {
            if (this.$refs.leftAsideList.activeTab < this.dataList.length - 1) {
              if (this.goodsList.length) {
                this.nextText =
                  this.dataList[this.$refs.leftAsideList.activeTab + 1].name;
                this.showBottomNext = true;
              }
            }
          });
          return;
        }
        this.page++;
        this.getGoodsList(this.currentId, true);
      }
    },
    changeNavToBefore() {
      this.page = 1;
      this.$nextTick(() => {
        if (this.$refs.leftAsideList.activeTab > 0) {
          this.$refs.leftAsideList.activeTab--;
          this.beforeText =
            this.dataList[this.$refs.leftAsideList.activeTab].name;
          this.$nextTick(() => {
            this.menuList =
              this.dataList[this.$refs.leftAsideList.activeTab].list;
            if (this.styleType == 7) {
              this.getGoodsList(
                this.catList[this.$refs.leftAsideList.activeTab].id
              );
            } else {
              this.goodsList = [];
            }
            if (this.styleType == 1) {
              this.canChangeNav = false;
              this.getClassifyGoods();
            }
            this.scrollViewTop = 1;
            this.canChangeNav = false;
            this.showBottomNext = false;
            this.freshing = false;
            setTimeout(() => {
              this.scrollViewTop = 0;
            }, 100);
          });
        }
      });
    },
    refresherrefresh() {
      this.freshing = true;

      if (this.$refs.leftAsideList.activeTab == 0) {
        setTimeout(() => {
          this.freshing = false;
        }, 200);
        return;
      }
      this.changeNavToBefore();
    },
    refresherpulling() {
      if (this.$refs.leftAsideList.activeTab != 0) {
        this.beforeText =
          this.dataList[this.$refs.leftAsideList.activeTab - 1].name;
        this.showRefresh = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: 12rpx;
  .left-side {
    width: 26.93%;
    background: #f2f2f2;
    height: 100%;
  }
  .template-content {
    width: 73.06%;
    height: 100%;
    background: #ffffff;
    scroll-view {
      height: 100%;
    }
    .goods-section {
      width: 100%;
      padding: 0 4.267vw;
    }

    .goodsContent {
      width: 100%;
      padding: 1.34px 4.267vw;
    }
  }
  .addBorderTopLeft {
    border-radius: 20rpx 0 0 0;
  }
  .template-content::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .no-more {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx 0;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #c1c1c1;
  }
  .refresh-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 0;
    .iconfont {
      color: #f0250e;
      font-size: 38rpx;
    }
    text {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
  }
}
</style>
